<template>
	<view class="content">
		<view class="login-logo">
			<image class="login-logo-image" src="/static/logo_abf.png" mode=""></image>
		</view>
		<!-- <view class="tips">
			<text class="">联营商实名注册表示同意爱八方产品联营协议及隐私政策</text>
		</view> -->
		<view class="login-form">
			<!-- <view style="display: flex;align-items: center; justify-content: flex-start;">
				<view style="width: 80rpx;">体系 :</view>
				<radio-group @change="radioChange">
					<label class="radio"><radio style="transform:scale(0.6)"  value="1" color="#e83e41" checked="true" />古宝</label>
					 <label class="radio"><radio style="transform:scale(0.6)"  value="2" color="#e83e41" />男神</label>
				</radio-group>
			</view> -->
			<view class="uni-form-item uni-column po">
				<input class="uni-input" v-model="mobile" type="number" placeholder-style="color:#cacaca" placeholder="请输入手机号" />
				<view class="login-form-code-btn" @click="getCode">{{text}}</view>
			</view>
			<view class="uni-form-item uni-column po">
				<input class="uni-input" v-model="code" type="number" placeholder-style="color:#cacaca" placeholder="请输入手机验证码" />
			</view>
			<view class="uni-form-item uni-column po">
				<input class="uni-input" v-model="password" password type="text" placeholder-style="color:#cacaca" placeholder="请输入新密码 (最少8位，数字+字母)" />
			</view>
			<view class="login-form-checkbox">
				<checkbox-group  @change="onCheckbox">
					<label>
						<checkbox value="cb" style="transform:scale(0.6)" color="#e83e41" :checked="is_checkbox" />注册/登陆即代表同意
					</label>
					<text class="login-form-link" @click="open('/pages/login/protocol/protocol')">《爱八方产品经销合同》</text>
					<text class="login-form-link"  @click="open('/pages/privacy/privacy')">《隐私政策》</text>
					<text class="login-form-link"  @click="open('/pages/page/page')">《用户协议》</text>
				</checkbox-group>				
			</view>
			<!-- <view class="login-form-checkbox">
				<checkbox-group  @change="onCheckbox">
					<label>
						<checkbox value="cb" style="transform:scale(0.6)" color="#e83e41" :checked="is_checkbox" />注册/登陆即代表同意
					</label>
					<text class="login-form-link"  @click="protocol">《爱八方产品经销合同》</text>
				</checkbox-group>				
			</view>
			<view class="login-form-checkbox">
				<checkbox-group  @change="onCheckbox">
					<label>
						<checkbox value="cb" style="transform:scale(0.6)" color="#e83e41" :checked="is_checkbox" />注册/登陆即代表同意
					</label>
					<text class="login-form-link"  @click="open('/pages/privacy/privacy')">《隐私政策》</text>
					<text class="login-form-link"  @click="open('/pages/page/page')">《用户协议》</text>
				</checkbox-group>				
			</view>
			 --><view class="">
				<view class="login-form-btn" @click="post" :class="[disabled ? '' : 'disabled']">注册</view>				
			</view>
		</view>
	</view>
</template>

<script>
	import {
        mapState,
        mapMutations
    } from 'vuex'
	
	export default {
		computed: {
			...mapState(['version','SystemInfo']),
			text(){
				return this.time > 0 ? this.time + 's重新获取' : '获取验证码';
			}
		},
		onLoad(e) {
			if(e.openid){
				this.openid = e.openid
				this.unionid = e.unionid
			}
		},
		data() {
			return {
				agent_type: 1,
				code: '',
				mobile: '',
				password: '',
				disabled:false,
				code_disabled: false,
				is_checkbox: false,
				time: 0,
				openid: null,
				unionid: null
			}
		},
		methods: {
			...mapMutations(['getNetworkType','vuexRequest','login','logout']),
			radioChange(evt) {
				//console.log(evt.target.value)
				this.agent_type = evt.target.value
			},
			post() {
				if(this.mobile.length != 11){ 
					uni.showToast({
						icon: 'none',
						title: "请输入正确的手机号码",
						position:'bottom'
					})
					return false; 
				}
				if(!this.code){ 
					uni.showToast({
						icon: 'none',
						title: "请输入验证码",
						position:'bottom'
					})
					return false; 
				}
				if(!this.password){ 
					uni.showToast({
						icon: 'none',
						title: "请输入密码",
						position:'bottom'
					})
					return false; 
				}
				if(!this.is_checkbox){ 
					uni.showToast({
						icon: 'none',
						title: "您必须同意爱八方产品经销合同",
						position:'bottom'
					})
					return false; 
				}
				uni.showLoading({
					title: '加载中'
				});
				
				// 默认信息
				let data = {mobile:this.mobile,group:'wechat',code:this.code,password:this.password,agent_type:this.agent_type}
				// app传入推送信息
				// #ifdef APP-PLUS
				let device_id = plus.push.getClientInfo().clientid,token_apn = plus.push.getClientInfo().token
				data = {mobile: this.mobile,group:'app',code:this.code,password:this.password,agent_type:this.agent_type,device_id:device_id,token_apn:token_apn,device:this.SystemInfo.platform,version:plus.runtime.version},
				// #endif
				
				//console.log(JSON.stringify(data))
				
				this.vuexRequest({
					url: '/api/v2/site/sign-up',
					method: 'POST',
					data: data,
					success: (res)  => {
						this.login(res.data.data.access_token)
						uni.hideLoading()
						// #ifdef H5
						if(localStorage.getItem("share_invitation_code")){
							localStorage.removeItem("share_invitation_code")
						}
						// 自动绑定微信
						this.bindAuth(res.data.data.access_token)
						this.setCookie('access-token',res.data.data.access_token,1000000)
						// #endif
						if(!this.openid){
							uni.switchTab({
								url: '/pages/tabbar/myPlace/dealer'
							});
							uni.showToast({
								icon: 'none',
								title: res.data.message,
								position:'bottom'
							})
							return !1
						}
						// 第三方登录绑定
						let authdata = {
							'group': 'app',
							'oauth_client': 'wechat',
							'oauth_client_user_id': this.openid,
							'unionid': this.unionid
						}
						this.vuexRequest({
							url: '/api/v2/member/auth/bind?access-token=' + res.data.data.access_token,
							method: 'POST',
							data: authdata,
							success: (res)  => {
								uni.hideLoading()
								uni.showToast({
									icon: 'none',
									title: '注册绑定成功',
									position:'bottom'
								})
								uni.switchTab({
									url: '/pages/tabbar/mine/new-mine'
								});
							},
							fail: (err)  => {
								uni.showToast({
									icon: 'none',
									title: err.data.message,
									position:'bottom'
								})
							},
						})							
					},
					fail: (err)  => {
						uni.hideLoading()
						uni.showToast({
							icon: 'none',
							title: err.data.message,
							position:'bottom'
						})
					},
				})
			},
			setCookie(cname, cvalue, exdays){
				let d = new Date();
				d.setTime(d.getTime() + (exdays*24*60*60*1000));
				let expires = "expires="+d.toUTCString();
				document.cookie = cname + "=" + cvalue + "; " + expires;
			},
			protocol() {
				uni.navigateTo({
					url: '/pages/login/protocol/protocol'
				});
			},
			getCode() {
				if(this.mobile.length != 11){ 
					uni.showToast({
						icon: 'none',
						title: "请输入正确的手机号码",
						position:'bottom'
					})
					return false; 
				}
				uni.showLoading({
					title: '发送中'
				});
				this.vuexRequest({
					url: '/api/v2/site/code',
					method: 'POST',
					data: {usage:'register',mobile:this.mobile ,group:'app'},
					success: (res)  => {
						uni.hideLoading()
						uni.showToast({
							icon: 'none',
							title: res.data.message,
							position:'bottom'
						})
						this.time = 60;
						this.timer()
					},
					fail: (err)  => {
						uni.hideLoading()
						uni.showToast({
							icon: 'none',
							title: err.data.message,
							position:'bottom'
						})
						
					},
				})
			},
			timer() {
				if (this.time > 0) {
					this.time--;
					setTimeout(this.timer, 1000);
				}
		   },
			onCheckbox() {
				this.is_checkbox = !this.is_checkbox
			},
			bindAuth(access_token) {	// h5自动绑定微信
				let data = {oauth_client: 'wechat',group:'app'}
				this.vuexRequest({
					url: '/api/v2/member/auth/bind?access-token=' + access_token,
					method: 'POST',
					data: data,
					success: (res)  => {},
					fail: (err)  => {},
				})
			},
			open(url) {
				uni.navigateTo({
					url: url,
					fail(err) {
						console.log(err)
					}
				})
			}
		},
		watch: {
			moblie () {
				if(this.moblie != '' && this.password != '' && this.code != ''){
					this.disabled = true
				}else{
					this.disabled = false
				}
			},
			password(){
				if(this.moblie != '' && this.password != '' && this.code != ''){
					this.disabled = true
				}else{
					this.disabled = false
				}
			},
			code(){
				if(this.moblie != '' && this.password != '' && this.code != ''){
					this.disabled = true
				}else{
					this.disabled = false
				}
			}
		}
	}
</script>

<style>
	page{
		background: #FFFFFF;
	}
	.tips{
		text-align: center;
		font-size: 26upx;
		color: #e83e41;
		margin: 0 0 30upx 0 ;
	}
	.po{
		position: relative;
	}
	.po:after{
		position: absolute;
		z-index: 10;
		right: 0;
		bottom: 0;
		left: 0;
		height: 1px;
		content: '';
		-webkit-transform: scaleY(.5);
		-ms-transform: scaleY(.5);
		transform: scaleY(.5);
		background-color: #c8c7cc;
	}
	.login-logo{
		text-align: center;
		padding: 60upx 0;
	}
	.login-logo-image{
		width: 153upx;
		height: 149upx;
		margin: 0 auto;
	}
	.login-form{
		width: 85%;
		margin: 0 auto;
	}
	.uni-input{
		padding-left: 0;
	}
	
	.login-form-checkbox {
		display: flex;
		padding:  20upx 0 0 0;
		font-size: 24upx;
		color: #cacaca;
		display: inline-flex;
	}
	uni-checkbox-group uni-label{
		padding: 0;
	}
	uni-radio-group, uni-checkbox-group{
		width: auto;
	}
	.login-form-link{
		color: #e83e41;
	}
	.login-form-btn{
		margin-top: 80upx;
		background: ;
		background-image: linear-gradient(to right, #f27072, #ea4a4c);
		text-align: center;
		border-radius: 200upx;
		height: 80upx;
		line-height: 80upx;
		font-size: 32upx;
		color: #FFFFFF;
	}
	.login-form-btn.disabled{
		background: #f09596;
	}
	.login-form-tips{
		padding-top: 40upx;
		text-align: center;
		color: #979797;
	}
	.login-form-code-btn{
		position: absolute;
		right: 0;
		top: 50%;
		color: #979797;
		margin-top: -30upx;
		font-size: 28upx;
		display: block;
		width: 180upx;
		height: 60upx;
		z-index: 10;
		line-height: 60upx;
		text-align: center;
	}
	.login-form-code-btn.disabled{
		color: #cacaca;
	}
	.login-form-checkbox {
		display: flex;
		padding:  20upx 0 0 0;
		font-size: 24upx;
		color: #cacaca;
		display: inline-flex;
	}
</style>
